@extends('admin.public.master')
@section('content')
    <div class="content-wrapper">
        <div class="content-wrapper-before"></div>
        <div class="content-header row">
            <div class="content-header-left col-md-1 col-4 mb-2">
                <a href="{{route('carousel.carousel.index')}}"> <h5 class="content-header-title">轮播图列表</h5></a>
            </div>
            <div class="content-header-left col-md-1 col-4 mb-2">
                <a href="{{route('carousel.carousel.create')}}"><h5 class="content-header-title">添加轮播图</h5></a>
            </div>
        </div>
        <form action="{{route('carousel.carousel.store')}}" method="post">
            @csrf
            <div class="content-body">
                <div class="card">
                    <div class="card-body">
                        <div class="row ml-2 mt-2">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">主题</label>
                                    <input type="text" class="form-control" name="title"  aria-describedby="helpId" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div id="attribute" class="row ml-2 mt-2">
                            <label class="form-check-label" for="">商品图片:</label>
                            <div class="col-12">
                                <div class="form-check form-check-inline">
                                    <button id="test1" type="button" class="btn btn-glow btn-bg-gradient-x-red-pink mt-1 ml-5">上传图片</button>
                                </div>
                            </div>
                        </div>
                        <div id="attribute" class="row ml-2 mt-2">
                            <label class="form-check-label" for="">商品图片预览:</label>
                            <div id="box" class="col-12">

                            </div>
                        </div>
                        <div class="row ml-2 mt-2">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">标识</label>
                                    <input type="text" class="form-control" name="sign"  aria-describedby="helpId" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="row ml-2 mt-2">
                            <div class="col-6">
                                <div class="form-group">
                                    <label  for="status">设为使用</label>
                                    <input class="mr-2" type="checkbox" name="status" id="status" value="1">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-muted " >
                        <button  type="submit" class="btn btn-glow btn-bg-gradient-x-red-pink mt-1 ml-5">保存数据</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection
@push('js')
    <script>
        var editor = new Simditor({
            textarea: $('#editor'),
        });
    </script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '{{route('util.upload.upload')}}'
                , accept: 'images'
                ,multiple:true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#icon').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    if (res.code == 0) {
                        console.log(res.data.src);
                        $('<img class="mr-2 mt-2" style="width: 200px;height: 200px;" src="' + res.data.src + '" /><input type="hidden" name="icon[]" value="' + res.data.src + '">').appendTo('#box')
                        $('#saveIcon').submit()
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>
@endpush

